<template>
  <div class="historylist">
    <ul>
      <li v-for="(item, index) in getHistotylist" :key="index">
        <div>
          <i class="iconfont icon-shijian"></i>
          <span @click="searchword(item)">
            {{ item }}
          </span>
        </div>
        <i class="iconfont icon-shanchu" @click="historyDel(index)"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { searchMusicList } from "@/api/Search";
export default {
  data() {
    return {
      getHistotylist: JSON.parse(localStorage.getItem("historyList")),
      List: [],
    };
  },
  methods: {
    searchword(item) {
      this.$store.commit("changeSearchWorld", item);
      this.$store.commit("changeIsSearchShow", false);
      this.$store.commit("changeIsShow", false);
      this.$store.commit("changeIsblock", true);
      searchMusicList(item).then((res) => {
        this.List = res.data.result.songs;
        // 扔去vuex
        this.$store.dispatch("searchMusicList", this.List);
      });
    },
    historyDel(nowIndex) {
      this.getHistotylist.splice(nowIndex, 1);
      this.$store.commit("changehistoryList", this.getHistotylist);
      localStorage.setItem(
        "historyList",
        JSON.stringify(this.$store.state.historyList)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.historylist {
  ul {
    li {
      position: relative;
      padding-left: vw(10);
      div {
        display: flex;
        align-items: center;
        span {
          color: #000;
          flex-flow: 1;
          border-bottom: 1px dashed #ccc;
          height: vw(80);
          line-height: vw(80);
          font-size: vw(28);
          width: 100%;
        }
        i {
          margin: 0 10px;
          color: #666;
        }
      }
      .icon-shanchu {
        color: rgb(162, 159, 159);
        position: absolute;
        right: 2.66667vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
    }
  }
}
</style>